<template>
  <div>
	  <div>
		  <div style="margin:2% 0;display: inline-block;">
			<span style="margin-left: 10px;">状态：</span>
			<el-select v-model="status" class="margin15" placeholder="请选择状态" style="width:200px;" @change="select">
				<el-option v-for="(item,index) in statusnum" :key="item.index" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询</el-button>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置</el-button>
		  </div>
	  </div>
	  <el-table
		v-loading="tableDataLoading"
	    :data="typeDatas.content"
		row-key="id">
	    <el-table-column
	  	 prop="id"
	  	 label="编号"
	  	 width="80">
	    </el-table-column>
		<el-table-column
			prop="img"
			label="举报截图">
				<template slot-scope="scope">
					<img :src="scope.row.img" alt="" width="40" height="40">
				</template>
		 </el-table-column>
		<el-table-column
	  	prop="nickName"
	  	label="举报人">
		<template slot-scope="scope">
		  <span style="color: #4f9dec;cursor: pointer;" @click="updates(scope.row)">{{scope.row.nickName}}</span>
		</template>
	    </el-table-column>
		<el-table-column
		 	prop="phone"
		 	label="举报人电话"
			width="150">
		</el-table-column>
		<el-table-column
		prop="content"
		label="举报原因"
		width="200">
		</el-table-column>
		<el-table-column
		prop="refundReason"
		label="驳回原因"
		width="200">
			<template slot-scope="scope">
				<span>{{scope.row.refundReason?scope.row.refundReason:'暂无'}}</span>
			</template>
		</el-table-column>
		<el-table-column
		 prop="reportNickName"
		 label="被举报人">
		 <template slot-scope="scope">
		   <span style="color: #4f9dec;cursor: pointer;" @click="updates2(scope.row)">{{scope.row.reportNickName}}</span>
		 </template>
		 </el-table-column>
		 <el-table-column
		  prop="reportPhone"
		  label="被举报人电话"
		  width="160">
		</el-table-column>
	    <el-table-column
	  	prop="createTime"
	  	label="举报时间"
		width="160">
	    </el-table-column>
		<el-table-column
		fixed="right"
		   prop="status"
		   label="状态">
		   <template slot-scope="scope">
		   		<span v-if="scope.row.status == 1" style="color: #3E8EF7;">待处理</span> 
				<span v-if="scope.row.status == 2">已驳回</span>
				<span v-if="scope.row.status == 3">已处理</span>
				<span v-if="scope.row.status == 4">已封禁</span>
		   	</template>
		</el-table-column>
		<el-table-column
			fixed="right"
		  label="操作"
		width="150">
		  <template slot-scope="scope">
		    <el-button
			  v-if="scope.row.status == 1"
		      size="mini"
		      type="primary"
			   :disabled="!isAuth('complaint:dispose')"
		      @click="dispose(scope.row)">处理
		    </el-button>
			<el-button
			  v-else
			  size="mini"
			  disabled
			  type="primary">处理
			</el-button>
			<el-button
			  size="mini"
			  type="danger"
			  disabled
			  v-if="scope.row.status == 1">删除
			</el-button>
			<el-button
			  size="mini"
			  type="danger"
			   :disabled="!isAuth('complaint:delete')"
			  v-if="scope.row.status !==1"
			  @click="deleteuser(scope.row)">删除
			</el-button>
		  </template>
		</el-table-column>
	  </el-table>
	  <div style="text-align: center;margin-top: 10px;">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :page-sizes="[10, 15, 20, 25]"
	      :page-size="size"
	      :current-page="page"
	      layout="total,sizes, prev, pager, next"
	      :total="typeDatas.totalElements">
	    </el-pagination>
	  </div>
	  <!-- 驳回原因 -->
	  <el-dialog title="处理方式" :visible.sync="dialogFormVisible" center>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;position: relative;top: -65px;">投诉截图：</span>
				<img :src="img" alt="" width="200" height="200">
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;position: relative;top: -65px;">举报原因：</span>
				<el-input style="width:50%;" v-model="content" type="textarea" :rows="4" readonly></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">被举报人：</span>
				<el-input style="width:50%;" v-model="reportNickName" readonly></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">被举报人电话：</span>
				<el-input style="width:50%;" v-model="reportPhone" readonly></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">处理方式：</span>
				<el-radio-group v-model="status" @change="bohuichange(status)">
				    <el-radio :label="2">驳回举报</el-radio>
					<el-radio :label="3">不予处理</el-radio>
					<el-radio :label="4">封禁账号</el-radio>
				</el-radio-group>
			</div>
	  		<div style="margin-bottom: 10px;" v-if="isshow">
	  			<span style="width: 200px;display: inline-block;text-align: right;position: relative;top: -65px;">驳回原因：</span>
	  			<el-input style="width:50%;" v-model="refundReason" type="textarea" :rows="4" placeholder="请输入驳回原因"></el-input>
	  		</div>
			<div slot="footer" class="dialog-footer">
			  <el-button @click="dialogFormVisible = false">取 消</el-button>
			  <el-button type="primary" @click="disposeNoticeTo()">确 定</el-button>
			</div>
	  </el-dialog>
  </div>
</template>

<script>
	export default {
	    data() {
	      return {
				size:10,
				page:1,
				status:0,
				isshow:false,
				statusnum:[
					{
						label: '全部',
						value: 0
					},
					{
						label: '待处理',
						value: 1
					},
					{
						label: '已驳回',
						value: 2
					},
					{
						label: '已处理',
						value: 3
					},
					{
						label: '已封禁',
						value: 4
					}
				],
				img:'',
				disposid:'',
				refundReason:'',
				content:'',
				reportNickName:'',
				reportPhone:'',
				formLabelWidth:'200px',
				tableDataLoading:false,
				dialogFormVisible:false,
				typeDatas:[],
			}
		},
		methods: {
			handleSizeChange (val) {
			  this.size = val
			  this.dataSelect()
			},
			handleCurrentChange (val) {
			  this.page = val
			  this.dataSelect()
			},
			// 查询
			select(){
				this.page = 1
				this.size = 10
				this.dataSelect()
			},
			// 重置
			cleans(){
				this.dataSelect()
			},
			// 详情跳转
			updates (row) {
			  this.$router.push({path: '/userDetail', query: {userId: row.userId}})
			},
			// 详情跳转
			updates2 (row) {
			  this.$router.push({path: '/userDetail', query: {userId: row.reportUserId}})
			},
			//驳回处理
			dispose(item){
				this.disposid = item.id
				this.content = item.content
				this.reportNickName = item.reportNickName
				this.reportPhone = item.reportPhone
				this.img = item.img
				this.dialogFormVisible = true
			},
			// 原因
			bohuichange(val){
				if(val==2){
					this.isshow = true
				}else{
					this.isshow = false
				}
			},
			//驳回处理
			disposeNoticeTo(){
				if (this.refundReason == '' && this.status==2) {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入驳回原因',
				        type: 'warning'
				    });
				    return
				}
				this.$http({
					url: this.$http.adornUrl2('/userReport/deal'),
					method: 'get',
					params: this.$http.adornParams({
						'id':this.disposid,
						'status':this.status,
						'refundReason':this.refundReason
					})
				}).then(({data}) => {
					if(data.status == 0){
						this.$message({
						  message: '操作成功',
						  type: 'success',
						  duration: 1500,
						  onClose: () => {
							this.status = 0
							this.dialogFormVisible = false
						    this.dataSelect()
						  }
						})
					}else{
						this.$message({
						  message: data.msg,
						  type: 'error',
						  duration: 3500,
						  onClose: () => {
							  this.status = 0
							this.dialogFormVisible = false
						    this.dataSelect()
						  }
						})
					}
				})
			},
			//删除投诉
			deleteuser (row) {
			  this.$confirm(`确定删除此条信息?`, '提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
			  }).then(() => {
			    this.$http({
			      url: this.$http.adornUrl2('/userReport/delete'),
			      method: 'get',
			      params: this.$http.adornParams({
				'id':row.id
			})
			    }).then(({data}) => {
			      this.$message({
			        message: '删除成功',
			        type: 'success',
			        duration: 1500,
			        onClose: () => {
						this.status = 0
			          this.dataSelect()
			        }
			      })
			    })
			  }).catch(() => {
			  })
			},
			// 获取投诉数据
			dataSelect () {
			  let page = this.page - 1
			  this.tableDataLoading = true
			  this.$http({
				url: this.$http.adornUrl2('/userReport/list'),
				method: 'get',
				params: this.$http.adornParams({
					'page':page,
					'size':this.size,
					'status':this.status
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.typeDatas = returnData
			  })
			}
		},
		mounted() {
			this.dataSelect()
		}
	  };
</script>

<style>
	
</style>
